<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商品详情</title>

    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/category.css">
    <link rel="stylesheet" href="css/product_details.css">
    <link rel="stylesheet" href="css/categoryList.css">
    <link rel="stylesheet" href="css/site-footer.css">
</head>

<body>
    <!-- 分类界面导航栏 -->
    <!-- 分类界面导航栏 -->
    <div class="nav">
        <img src="imgs/logo_files/logo.png" alt="" class="logo">
        <!-- 分类导航 -->
        <div class="nav-c">
            <ul class="cloth-nav">
                <li class="cloth-category">
                    <a href="#" class="homepage">首页</a>
                </li>
                <li class="cloth-category">
                    <a href="#" class="cloth-link">女装</a>
                </li>
                <li class="cloth-category">
                    <a href="#" class="cloth-link">男装</a>
                </li>
                <li class="cloth-category">
                    <a href="#" class="cloth-link">箱包</a>
                </li>
                <li class="cloth-category">
                    <a href="#" class="cloth-link">配饰</a>
                </li>
            </ul>
            <!-- 搜索 -->
            <div class="search-area">
                <!-- <form action="" class="search-form"> -->
                <input type="search" class="search-text" placeholder="搜索商品名/商品编号">
                <a href="#" class="search-btn">
                    <!-- <img src="imgs/logo_files/icon-21.png" alt="" class="search-img"> -->
                </a>
                <!-- </form> -->
            </div>
            <div class="right-icon">
                <a href="" class="like"></a>
                <a href="" class="cart"></a>
                <a href="" class="personal"></a>
            </div>
        </div>
    </div>
    <!-- 商品描述,详情页 小图&大图&商品规格 -->
    <div class="product_intro">
        <!-- 左侧商品介绍(小图部分) -->
        <div class="product_intro_smimg">
            <!-- 向上箭头 -->
            <span class="arr_up"></span>
            <!-- 小图片列表 -->
            <ul class="smimg_intro">
                <li class="smimg_intro_iteam">
                    <a class="sm_link_big" href="#">
                        <img src="imgs/logo_files/figure-1.png" alt="">
                    </a>
                </li>
                <li class="smimg_intro_iteam">
                    <a class="sm_link_big" href="#">
                        <img src="imgs/logo_files/figure-2.png" alt="">
                    </a>
                </li>
                <li class="smimg_intro_iteam">
                    <a class="sm_link_big" href="#">
                        <img src="imgs/logo_files/figure-3.png" alt="">
                    </a>
                </li>
                <li class="smimg_intro_iteam">
                    <a class="sm_link_big" href="#">
                        <img src="imgs/logo_files/figure-4.png" alt="">
                    </a>
                </li>
                <li class="smimg_intro_iteam end_iteam">
                    <a class="sm_link_big" href="#">
                        <img src="imgs/logo_files/figure-5.png" alt="">
                    </a>
                </li>
            </ul>
            <!-- 向下箭头 -->
            <span class="arr_down"></span>
        </div>

        <!-- 中间大图部分 -->

        <div class="product_intro_bigimg">
            <img class="intro_bigimg" src="imgs/logo_files/figure-1.png" alt="">
        </div>


        <!-- 右侧商品参数-->
        <div class="product_parameters">

            <!-- 商品名称及价格 -->
            <h2 class="product_details_name">女装外套 牛仔短茄克 春季上新 牛仔外套 水洗产品【100%棉】448126</h2>
            <div class="product_price">
                <span class="now_price">¥399.00</span>
                <span class="old_price">初上市价格¥499.00</span>
            </div>


            <!-- 商品颜色及数量 -->
            <div class="product_color-counts">
                <!-- 商品颜色 -->
                <div class="product_color">
                    <p>颜色:</p>
                    <ul class="color_type">
                        <li class="color_iteam color_1">

                        </li>
                        <li class="color_iteam color_2">

                        </li>
                        <li class="color_iteam color_3">

                        </li>
                        <li class="color_iteam color_4">

                        </li>
                    </ul>
                </div>
                <!-- 商品数量 -->
                <div class="product_counts">
                    <p>数量:</p>
                    <div class="select_counts">
                        <a href="#" class="link_add">+</a>
                        <input class="counts" type="text">
                        <a href="#" class="link_reduce">-</a>

                    </div>
                </div>

            </div>

            <!-- 商品具体参数选择__sku -->

            <ul class="product_sku">
                <li class="specs_list list_01">
                    150/76A/XS
                </li>
                <li class="specs_list list_02">
                    155/80A/S
                </li>
                <li class="specs_list list_03">
                    160/84A/M
                </li>
                <li class="specs_list list_04">
                    160/88A/L
                </li>
                <li class="specs_list list_05">
                    165/92A/XL
                </li>
                <li class="specs_list list_06">
                    170/100B/XXL
                </li>
                <li class="specs_list list_06">
                    175/108C/3XL
                </li>
            </ul>

            <!-- 商品配送方式 -->
            <div class="product_delivery_method">
                <span class="text" style="color: #666;">配送方式:</span>
                <label class="radio_iteam" for="method_left">
                    <input type="radio" class="express_delivery" value="0" name="method" id="method_left">
                    <span class="img_raio"></span>
                    快递配送
                </label>

                <label class="radio_iteam" for="method_right">
                    <input type="radio" class="express_delivery" value="1" name="method" id="method_right">
                    <span class="img_raio"></span>
                    门店自提
                </label>
                <!-- 30天退货以及分享收藏 -->
                <div class="collection_share">
                    <span class="return_goods">支持三十天无理由退货</span>
                    <a href="#" class="share">
                        <img src="imgs/logo_files/icon-4.png" alt="" class="img_share">
                        <span>分享</span>
                    </a>
                    <a href="#" class="collection">
                        <img src="imgs/logo_files/like.png" alt="" class="img_collection">
                        <span>收藏</span>
                    </a>

                    <!-- 立即购买,加入购物车按钮 -->
                    <div class="purchase">
                        <a href="#" class="now_purchase">立即购买</a>
                        <a href="#" class="put_cart">加入购物车</a>
                    </div>

                </div>


            </div>

        </div>

    </div>


    <!-- 商品详情 评价 购买咨询 -->
    <div class="tab-main-large">
        <!-- 上部分表头 -->
        <div class="tab_main">
            <a href="#" class="tab_product_deatils top">商品详情</a>
            <a href="#" class="tab_product_deatils">商品评价</a>
            <a href="#" class="tab_product_deatils">购买咨询</a>
            <div class="main_content">
                <h2 class="title">产品参数:</h2>
                <p class="deatil_content">产品货号：448126000</p>
                <p class="deatil_content">商品颜色：00白色 10水粉色 54绿色 67蓝色</p>
                <p class="deatil_content">上市季节：2022年春季</p>
                <p class="deatil_content">商品材质：[面料]尼龙100%，[亲里]聚酯纤维100%，
                    [填充物]聚酯纤维100%，[包边]尼龙100%</p>
                <p class="deatil_content">商品尺码：150/76A/XS 155/80A/S 160/84A/M
                    160/88A/L 165/92A/XL 170/100B/XXL
                    175/108C/3XL</p>

            </div>
        </div>
    </div>

    <!-- 产品展示 -->
    <div class="product_deatil_img_represent">
        <p class="img_represent_title">产品展示</p>
        <img src="imgs/logo_files/represent (2).png" alt="" class="bigimg_product_represent">

        <p class="img_represent_title">商品尺寸</p>
        <img src="imgs/logo_files/represent (3).png" alt="" class="bigimg_product_size">

        <p class="img_represent_title">产品细节</p>
        <img src="imgs/logo_files/represent (4).png" alt="" class="bigimg_product_deatils">
        <img src="imgs/logo_files/represent (5).png" alt="" class="bigimg_product_deatils">
        <p class="img_represent_title">商品说明</p>
        <img src="imgs/logo_files/represent (6).png" alt="" class="bigimg_product_direction-1">
        <img src="imgs/logo_files/represent (1).png" alt="" class="bigimg_product_direction-2">
        <p class="img_represent_title">店铺推荐</p>
    </div>
    <!-- 店铺推荐 -->
    <!-- <div class="store_recommendations">
            <div class="jacket-item">
                <a href="#" class="jacket-link"></a>
                <p class="jacket-dec">设计师合作款·千鸟格大衣&nbsp;&nbsp;冬季上新【羊毛】</p>
                <p class="jacket-size">【S-XL】</p>
                <span class="jacket-price">￥799</span>
                <img src="imgs/logo_files/like.png" alt="" class="like-cloth">
                <img src="imgs/logo_files/cart00.png" alt="" class="cart-cloth">
            </div>
        </div> -->
    <!-- <p class="jacket-title">外套&针织衫 </p> -->
    <!-- <span class="bolder-title">休闲外套</span> -->
    <div class="cloth-box">
        <div class="jacket-item">
            <a href="#" class="jacket-link"></a>
            <p class="jacket-dec">设计师合作款·千鸟格大衣&nbsp;&nbsp;冬季上新【羊毛】</p>
            <p class="jacket-size">【S-XL】</p>
            <span class="jacket-price">￥799</span>
            <img src="imgs/logo_files/like.png" alt="" class="like-cloth">
            <img src="imgs/logo_files/cart00.png" alt="" class="cart-cloth">
        </div>
        <div class="jacket-item">
            <a href="#" class="jacket-link"></a>
            <p class="jacket-dec">设计师合作款·千鸟格大衣&nbsp;&nbsp;冬季上新【羊毛】</p>
            <p class="jacket-size">【S-XL】</p>
            <span class="jacket-price">￥799</span>
            <img src="imgs/logo_files/like.png" alt="" class="like-cloth">
            <img src="imgs/logo_files/cart00.png" alt="" class="cart-cloth">
        </div>
        <div class="jacket-item right-last">
            <a href="#" class="jacket-link"></a>
            <p class="jacket-dec">设计师合作款·千鸟格大衣&nbsp;&nbsp;冬季上新【羊毛】</p>
            <p class="jacket-size">【S-XL】</p>
            <span class="jacket-price">￥799</span>
            <img src="imgs/logo_files/like.png" alt="" class="like-cloth">
            <img src="imgs/logo_files/cart00.png" alt="" class="cart-cloth">
        </div>



    </div>
    <!-- 网站底部 -->
    <div class="site-footer">

        <div class="footer-c">
            <!-- 左侧logo -->
            <div class="sitelogo">
                <img class="img-logo" src="imgs/logo_files/logo.png" alt="">
            </div>
            <!-- 网站底部中间区域 -->
            <div class="footer-info">
                <ul class="top-info">
                    <li class="info-iteam">
                        <a href="" class="link_iteam">
                            门店资讯
                        </a>
                    </li>
                    <li class="splineLine">|</li>
                    <li class="info-iteam">
                        <a href="" class="link_iteam">
                            网络购物FAQ</a>
                    </li>
                    <li class="splineLine">|</li>
                    <li class="info-iteam"> <a href="" class="link_iteam">
                            关于BALANCE</a>
                    </li>
                    <li class="splineLine">|</li>
                    <li class="info-iteam"> <a href="" class="link_iteam">
                            电子报订阅
                        </a> </li>
                    <li class="splineLine">|</li>
                    <li class="info-iteam"> <a href="" class="link_iteam">
                            买卖定型化契约宣传
                        </a> </li>
                    <li class="splineLine">|</li>
                    <li class="info-iteam"> <a href="" class="link_iteam">
                            政府政令
                        </a> </li>
                </ul>
                <p class="under-info">Copyright © BALANCE Ltd. All rights reserved</p>
            </div>
            <!-- 网站右侧二维码区域 -->
            <div class="QR-code">
                <img class="img-QR-code" src="imgs/logo_files/QR-code-right.png" alt="">
                <img class="img-QR-code QR-2" src="imgs/logo_files/QR_code.png" alt="">
            </div>


        </div>



    </div>

</body>

</html>